﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script src="../Scripts/jquery-3.3.1.js"></script>
    <script src="../layui/layui.js" charset="utf-8"></script>
</head>
<body>
    <div>
        <table class="layui-hide " id="test" lay-filter="test"></table>
    </div>
    <div id="test1"></div>
    <script>
        var datademo;
        layui.use(['table', 'laypage', 'layer'], function ()
        {
            var table = layui.table,
                laypage = layui.laypage;

            table.render({ //相当于ajax
                elem: '#test'
              , url: 'getQuestionLibrary.aspx'
                , toolbar: true
                , title: '学生基本信息表'
              , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
              , cols: [[
                { field: 'student_id', width: 180, title: '学号', sort: true }
                , { field: 'student_name', width: 80, title: '姓名' }
                 , { fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo' }//添加列工具条
              ]]
                , parseData: function (res)
                { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                    
                    //console.log(this);
                    datademo = res.data;
                    console.log(JSON.stringify(res));
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": "" //解析数据列表
                    };
                }
            });

            laypage.render({
                elem: 'test1'
            , count: 500 //数据总数，从服务端得到
               , limit: 10                      //每页显示条数
                , limits: [10, 20, 30]
                , curr: 1                        //起始页
                , groups: 5                      //连续页码个数
                , prev: '上一页'                 //上一页文本
                , netx: '下一页'                 //下一页文本
                , first: 1                      //首页文本
                , last: 100                     //尾页文本
                , layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip']

            , jump: function (obj, first)
            {
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数
                page = obj.curr;  //改变当前页码
                limit = obj.limit;
                //首次不执行
                if (!first)
                {
                    //do something
                    alert(JSON.stringify(datademo));
                    table.reload("test", {
                        data: datademo
                    });
                }
            }
            });

        });
    </script>
</body>
</html>
